
#sidebar-wrapper{float:left; width:330px;} 
#main-wrapper {float:right; width:600px;min-height: 590px;border-left: 1px solid #CCC;}

.fbshare {line-height: 20px; color: #fff !important; background: #3b5998; text-decoration: none !important; border: 1px solid #313c7d; padding: 3px;  font-family: arial, verdana, sans-serif; font-size: 12px;}

.twshare {color: #fff !important; background: #4099FF; text-decoration: none !important; border: 1px solid #3a8be8; padding: 3px;  font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px;}

.plshare {color: #fff !important; background: #c0361a; text-decoration: none !important; border: 1px solid #9c2c15; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px;}

.rdshare {color: #000 !important; background: #cee3f8; text-decoration: none !important; border: 1px solid #bacde0; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px;}

.dgshare {color: #fff !important; background: #5b88af; text-decoration: none !important; border: 1px solid #4a6f8f; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px;}

.stshare {color: #fff !important; background: #ea4a24; text-decoration: none !important; border: 1px solid #c43e1e; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px;}

.tcshare {color: #fff !important; background: #157501; text-decoration: none !important; border: 1px solid #105901; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px;}

.sharecon {background: #f9f9f9; padding: 5px; height: 20px; border: 1px solid #BBB;}

/* Add More Features to the Blogger Comments by Taufik Nurrohman */
img.emo {
  display:inline-block;
  vertical-align:middle;
}

#comment-holder .cm-youtube {
  display:block;
  border:none !important;
  background-color:#333;
  width:370px;
  height:218px;
  margin:0 auto 30px;
}

#comment-holder .cm-image {
  display:block;
  margin:0 auto 15px;
  outline:none;
  border:1px solid #ccc;
  background-color:white;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  padding:5px;
  max-width:96%;
  height:auto;
  width:auto\9;
}

#comment-holder code,
#comment-holder i[rel=&quot;code&quot;] {
  font:normal 12px Monaco,&quot;Courier New&quot;,Monospace;
  color:blue;
}

#comment-holder pre,
#comment-holder i[rel=&quot;pre&quot;] {
  display:block;
  font:normal 12px Monaco,&quot;Courier New&quot;,Monospace;
  background-color:#333;
  color:white;
  padding:0.5em 1em;
  word-wrap:normal;
  white-space:pre;
  overflow:auto;
}

#comment-holder blockquote,
#comment-holder b[rel=&quot;quote&quot;] {
  margin:0 2%;
  background-color:#eee;
  padding:1em 1.2em;
  border-left:4px solid #7498AD;
  display:block;
  font-weight:bold;
  font-style:italic;
}

#comment-holder i[rel=&quot;image&quot;],
#comment-holder i[rel=&quot;youtube&quot;] {
  display:block;
  overflow:hidden;
  border:2px solid black;
  position:relative;
  width:170px;
  height:100px;
  margin:0 auto 30px;
}

#comment-holder i[rel=&quot;image&quot;]:before,
#comment-holder i[rel=&quot;youtube&quot;]:before {
  content:&quot;Please enable your JavaScript to see this image!&quot;;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:red;
  color:white;
  font-weight:bold;
  text-align:center;
  padding:15px 0;
}

#comment-holder i[rel=&quot;youtube&quot;]:before {
  content:&quot;Please enable your JavaScript to watch this video!&quot;;
}
.bubble {
background-color: rgba(102, 102, 102, 1);
background-position: center center;
border-radius: 3px;
border: solid 1px rgba(102, 102, 102, 1);
color: #fcdc00;
cursor: pointer;
display: inline-block;
font-size: 12px;
padding: 2px 0;
position: relative;
text-align: center;
-moz-transition-property: background-color, border-color;
-ms-transition-property: background-color, border-color;
-o-transition-property: background-color, border-color;
-webkit-transition-property: background-color, border-color;
transition-property: background-color, border-color;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-moz-transition-timing-function: ease-in;
-ms-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
width: 100px;
font-weight:700;
font-family:tahoma;
}

.bubble.light {
background-color: rgba(217, 217, 217, 1);
border-color: rgba(217, 217, 217, 1);
}

.bubble.empty {
color: rgba(102, 102, 102, 1);
border: solid 1px rgba(153, 153, 153, 1);
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
background-color: white;
}

.bubble .bubble-tail,
.bubble.empty .bubble-tail:after {
border-color: rgba(102, 102, 102, 1) transparent transparent transparent;
border-style:solid;
border-width: 5px;
bottom: -10px;
content: &#39;&#39;;
height: 0;
left: 50%;
margin-left: -5px;
position: absolute;
-moz-transition: border-color 0.5s ease-in;
-ms-transition: border-color 0.5s ease-in;
-o-transition: border-color 0.5s ease-in;
-webkit-transition: border-color 0.5s ease-in;
transition: border-color 0.5s ease-in;
width: 0;
}

.bubble.light .bubble-tail {
border-color: rgba(217, 217, 217, 1) transparent transparent transparent;
}

.bubble.empty .bubble-tail {
border-color: rgba(153, 153, 153, 1) transparent transparent transparent;
}

.bubble.empty .bubble-tail:after {
left: 0;
top: -6px;
border-color: white transparent transparent transparent;
}

/* On hover color change.
.bubble:hover {
background-color: #d14836;
border-color: #d14836;
}

.bubble.empty:hover {
/*background-color: white;
border-color: #d14836;
color: #d14836;
}

.bubble:hover .bubble-tail {
border-color: #d14836 transparent transparent transparent !important;
}
*/
#content {
position: relative;
}

/* the 3d flip animations/transitions */
.item {
/* give some perspective so not so flat */
background-color: transparent; /* Have something! Need to capture clicks. */
cursor: pointer;
-moz-perspective: 1000;
-ms-perspective: 1000;
-o-perspective: 1000;
-webkit-perspective: 1000;
perspective: 1000;
z-index: 1;
}

.card {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
}

.card:hover {
/* make the timing different so the cards don&#39;t look in sync */
-moz-transition: 0.5s linear;
-ms-transition: 0.5s linear;
-o-transition: 0.5s linear;
-webkit-transition: 0.5s linear;
transition: 0.5s linear;
}

.front, .back {
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
}

.item.ad .front {
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
-o-backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}

.item:hover {
z-index: 10 !important;
}

.item .front {
z-index: 10;
}

.item:hover .front {
z-index: 0;
}

.item:hover .back {
z-index: 10;
}

/* At the hover state we want to rotate the card 180 degrees */
.item:hover .card {
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.item:hover .card.flipLeft {
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.item:hover .card.flipUp {
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.item:hover .card.flipDown {
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.item .card .back {
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card.flipLeft .back {
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card.flipUp .back {
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.card.flipDown .back {
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}

.item.ad:hover .card {
-moz-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg); /* Don&#39;t want ad mirrored */
}

/* the individual tile styles */

.items .item {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
/* Could use &quot;all 1.2s ease-out&quot; but only FireFox seems to animate size smoothly.
It looks better to snap height/width, and then animate position and opacity. */
-moz-transition: left 1.2s ease-out, top 1.2s ease-out, opacity 1.2s ease-out;
-ms-transition: left 1.2s ease-out, top 1.2s ease-out, opacity 1.2s ease-out;
-o-transition: left 1.2s ease-out, top 1.2s ease-out, opacity 1.2s ease-out;
-webkit-transition: left 1.2s ease-out, top 1.2s ease-out, opacity 1.2s ease-out;
transition: left 1.2s ease-out, top 1.2s ease-out, opacity 1.2s ease-out;
}

.items .item.new,
.items .item.filtered {
opacity: 0;
/*visibility: hidden !important; Beware: Safari doesn&#39;t like animating visibility. */
}

.items .item .card {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
box-shadow: 2px 2px 2px #ccc;
}

.items .item .card .front,
.items .item .card .back {
background-color: #ddd;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
overflow: hidden;
width: 100%;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-o-border-radius:6px;
-ms-border-radius:6px;
}

.items .item:hover .card {
cursor: pointer;
}

.items .item .card .back {
background: #333;
color: white;
height: 100%;
width: 100%;
}

.items .item .card .back .reblog-badge {
position: relative;
top: 3px;
}

.items .item .card .front .overlay {
display: table;
height: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
width: 100%;
}

.items .item .card .front .title {
display: table-cell;
font-size: 14px;
padding: 4px;
text-align: center;
vertical-align: middle;
}

.items .item .front .title {
color: #666;
font-size: 14px;
}

.items .item .summary {
background-color: white;
border-radius: 4px;
color: black;
display: none; /* Disable summaries. */
font-size: 12px;
left: -10px;
margin-top: 0px;
max-height: 200px;
opacity: 0;
overflow: visible;
padding: 10px;
position: absolute;
text-overflow: ellipsis;
top: 90%;
visibility: hidden;
width: 150px;
}

.items .item:hover .summary {
cursor: pointer;
margin-top: 7px; /* bounce */
opacity: 0.9;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transition-delay: 1.4s;
-ms-transition-delay: 1.4s;
-o-transition-delay: 1.4s;
-webkit-transition-delay: 1.4s;
transition-delay: 1.4s;
visibility: visible;
z-index: 99;
}

.items .item .summary .teaser {
border-color: transparent transparent white transparent;
border-style: solid;
border-width: 7px;
height: 0px;
left: 25px;
position: absolute;
top: -12px;
width: 0px;
z-index: 1;
}

.overlay .title,
.overlay .date {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
margin: 5px 5px 0px 5px;
max-width: 95%;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}

.overlay .title {
color: white;
font-size: 12px;
height: 65px;
margin-top: 10px;
max-height: 65px;
vertical-align: bottom;
white-space: normal;
font-family:tahoma;
background-color: rgba(102, 102, 102, 1);
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
padding: 4px 2px 4px 2px;
font-weight: 700;
}

.overlay .date {
color: #fcdc00;
font-size: 16px;
margin-top: 20px;
}

.overlay .comments-count {
display: block;
margin: 8px auto 0 auto;
}
.Related{-moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: 1px solid #d3d3d3; height: 142px; line-height: normal; margin: 12px 0px 20px 0px;}

.overlay .comments-count.hidden {
display: block;
visibility: hidden;
.item.grouped .front .overlay .title {
font-size: 70% !important;
overflow: hidden;
text-overflow: ellipsis;
}

.item.grouped .back .overlay .title,
.item.grouped .back .overlay .comments-count {
display: none;
}

.item.grouped .back .overlay .date {
padding-top: 5px;
white-space: normal;
}

#controls {
font-family: &#39;Helvetica Neue Light&#39;, HelveticaNeue-Light, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif;
position: absolute;
top: -40px;
left: 0px;
overflow: visible;
z-index: 100;
}

#controls:focus,
#controls:active {
outline: none;
}
